<div class="main">
  <button
    nz-button
    class="header-button"
    [routerLink]="['/home']"
    routerLinkActive="active"
    nzType="default"
  >
    首页
  </button>
  <nz-table #basicTable [nzData]="courses" [nzPageSize]="10">
    <thead>
      <tr>
        <th
          [nzChecked]="allChecked"
          (nzCheckedChange)="onAllChecked($event)"
        ></th>
        <th>id</th>
        <th>名称</th>
        <th>进度</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td
          [nzChecked]="setOfCheckedId.has(data.course.id)"
          (nzCheckedChange)="onItemChecked(data.course.id, $event)"
        ></td>
        <td>{{ data.course.id }}</td>
        <td>{{ data.course.name }}</td>
        <td [ngClass]="data.progress.state">{{ data.maxLocation }}</td>
        <td>
          <a (click)="play(data)">继续</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="edit(data)">编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="deleteCourse(data)">删除</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="reset(data)">重置</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="export([data])">导出课程</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="exportData([data])">导出进度</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <div class="button-bar">
    <button (click)="deleteSelected()" nz-button nzType="default">
      删除课程
    </button>
    <button (click)="resetSelected()" nz-button nzType="default">
      重置课程
    </button>
    <button (click)="exportSelected()" [nzLoading]="exportSelectedLoading" nz-button nzType="default">
      导出课程
    </button>
    <button (click)="exportSelectedData()" [nzLoading]="exportSelectedDataLoading" nz-button nzType="default">
      导出课程进度
    </button>
    <button (click)="exportJupyterNotebook()" [nzLoading]="exportJupyterNotebookLoading" nz-button nzType="default">
      导出为notebook
    </button>
    <button (click)="exportPythonProject()" [nzLoading]="exportPythonProjectLoading" nz-button nzType="default">
      导出为Python项目
    </button>
  </div>
  <div class="button-bar">
    <button (click)="importInnerCourses()" nz-button nzType="default">
      导入内置课程
    </button>
    <button (click)="importCoursesOrProgress()" nz-button nzType="default">
      导入课程或进度
    </button>
    <button (click)="createCourse()" nz-button nzType="default">
      创建新课程
    </button>
  </div>
</div>
<nz-modal
  [(nzVisible)]="isInnerCourseModalVisible"
  nzTitle="确定导入内置课程吗？"
  [nzCancelText]="null"
  (nzOnOk)="onInnerCourseModalOk()"
  (nzOnCancel)="isInnerCourseModalVisible = false"
  [nzMask]="false"
  nzAutofocus="ok"
>
  <ng-container *nzModalContent>
    <div *ngIf="newCourses.length > 0">将会导入以下课程：</div>
    <div class="course-list">
      <span *ngFor="let item of newCourses">{{ item.name }}<br /></span>
    </div>
    <div>以下课程由于已经存在或者有相同id项将会被更新（不会覆盖保存的代码和进度）：</div>
    <div class="course-list">
      <span *ngFor="let item of existedCourses">{{ item.name }}<br /></span>
    </div>
  </ng-container>
</nz-modal>
<nz-modal
  [(nzVisible)]="isCreateCourseModalVisible"
  nzTitle="创建课程"
  (nzOnOk)="onCreateCourseModalOk()"
  (nzOnCancel)="onCreateCourseModalCancel()"
  [nzOkDisabled]="shouldDisableCreateCourseModal()"
  [nzMask]="false"
  nzAutofocus="ok"
>
  <ng-container *nzModalContent>
    <input class="modal-input" nz-input placeholder="课程id" [(ngModel)]="createCourseModelId"/>
    <input class="modal-input" nz-input placeholder="课程名称" [(ngModel)]="createCourseModelName"/>
  </ng-container>
</nz-modal>
